<template>
  <div class="ek-page" style="display: flex;">
    <div class="left-list">
         <el-tree
         :expand-on-click-node="false"
         :highlight-current="true"
         :default-expand-all="true"
          :data="orderState"
          :props="{
            children: 'children',
            label: 'dimension_name',
            value: 'dimension_value'
          }"
          @node-click="handleStateClick"
        />
      </div>
    <ekList
      :layoutData="layoutData"
      ref="refList"
           style="    width: calc(100% - 250px);"
    >
      <template v-slot:operate>
        <ekBtnGroup :buttons="buttons" @operate="handleOperate" />
      </template>
      <template #operateColumn="{ scope }">
        <ekBtnGroup
          mode="column"
          size="small"
          :buttons="columnButtons"
            :params="{ row: scope.row }"
          @operate="(item) => handleOperate(item, scope)"
        />
      </template>
      <template #profit="{ scope }">
        {{ scope.row.transfer_price - scope.row.transfer_cost }}
      </template>
    </ekList>
    
    <!-- <Outbound
      :rowId="rowId"
      v-model:visiable="outVisiable"
      @submit="confirm"
    /> -->
     <Audit
      :rowId="rowId"
      v-model:visiable="auditVisiable"
      @submit="confirm"
    />
  </div>
</template>

<script setup>
import { defineComponent, onMounted, getCurrentInstance, ref } from "vue";
import {
  configs,
  searchs,
  pages,
  columns,
  buttons,
  columnButtons,
  apis,
} from "./dataAll.js";

import ekList from "@/components/business/ekList/index.vue";
import ekBtnGroup from "@/components/business/ekList/components/ekBtnGroup.vue";
import { getDimensionByCode } from "@/utils/sys.js";
import Audit from "@/views/transfer/components/Audit.vue";

import { useRoute } from 'vue-router';
import router from "../../router";

const {
  appContext: {
    config: { globalProperties },
  },
} = getCurrentInstance();

 
const route = useRoute();

const { $storage, $http, $ekMessage, $ekMessageBox } = globalProperties;

let refList = ref(null);


// 表格头部
let layoutData = ref({
  modelCode: "MODEL_BUSINESS_MANAGE",

  configs,

  // 查询条件
  searchs: [
    ...searchs
  ],
  // 分页配置
  pages:{
    ...pages
  },
  // 按钮配置
  buttons,
  // 显示字段
  columns,
});

const auditVisiable = ref(false);
const visiable = ref(false);
const rowId = ref("");
const title = ref("");
const disabled = ref(false);
const handleOperate = (item, scope) => {
  switch (item.operate) {
    case "add":
      add();
      break;
    case "edit":
      edit(scope);
      break;
    case "deleteAll":
      deleteAll();
      break;
    case "delete":
      deleteOne(scope);
      break;
    case "detail":
      detail(scope);
      break;
    case "audit":
      audit(scope);
      break;
    case "stateOn":
      state(1);
      break;
    case "stateOff":
      state(0);
      break;
  }
};
const state = (state) => {
  let rows = refList.value.getSelectionRows();
  if (rows.length == 0) {
    $ekMessage.warning("请选择操作数据");
    return;
  }
  let ids = rows.map((item) => item.id);
  $http.post(apis.state, { ids: ids, state: state }).then((res) => {
    $ekMessage.success("操作成功");
    refresh();
  });
};
const audit = (scope) => {
  // rowId.value = scope.row.id;
  // auditVisiable.value = true
  router.push({
     path:'/all/detail',
    query:{
      order_logistic_no: scope.row.order_logistic_no
    }
  })
};

const detail = (scope) => {
  // title.value = "详情";
  // rowId.value = scope.row.id;
  // visiable.value = true;
  // disabled.value = true;
  router.push({
    path:'/all/detail',
    query:{
      order_logistic_no: scope.row.order_logistic_no
    }
  })
};
const add = () => {
  title.value = "新增";
  rowId.value = "";
  visiable.value = true;
  disabled.value = false;
};
const edit = (scope) => {
  title.value = "编辑";
  rowId.value = scope.row.id;
  visiable.value = true;
  disabled.value = false;
};
const deleteOne = (scope) => {
  let ids = [scope.row.id];
  del(ids);
};
const deleteAll = () => {
  let rows = refList.value.getSelectionRows();
  if (rows.length == 0) {
    $ekMessage.warning("请选择操作数据");
    return;
  }
  let ids = rows.map((item) => item.id);
  del(ids);
};
const del = (ids) => {
  $ekMessageBox.confirm("确认删除？").then(() => {
    $http
      .get(apis.del, {
        params: {
          ids: ids,
        }
        
      })
      .then((res) => {
        $ekMessage.success("操作成功");
        refresh();
      });
  });
};
const confirm = (done) => {
  refresh();
  done();
};
const refresh = () => {
  refList.value.refresh();
};
const handleStateClick = (item) => {
  if(item.dimension_value == ''){
    refresh();
    return;
  }
   refList.value.refresh({
    order_state: item.dimension_value
   });

}
const orderState = ref([])
onMounted(async() => {
 const arr = await getDimensionByCode('DIM_ORDER_STATE');
  console.log(orderState.value);
  orderState.value = [{
    dimension_name:'订单状态',
    dimension_value:'',
    children: arr
  }];

});
</script>
<style scoped lang="scss">
.page {
  background-color: #f4f4f4;
}
.left-list {
  padding: 4px;
  width: 230px;
  height: 100%;
  background-color: #fff;
  flex-shrink: 0;
  border-radius: 4px;
  margin-right: 10px;
}
</style>
